<template>
  <el-dialog
    width="500px"
    custom-class="popup-problem"
    :visible.sync="show"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="popup-title">
      <span
        class="el-icon-circle-close icon-close"
        @click="$emit('close')"
      ></span>
      <h3>{{ title }}</h3>
    </div>
    <div class="popup-content" :class="content ? 'answer' : ''">
      <div class="content-title" v-show="content">{{ content }}</div>
      <div class="content-author" v-show="content">
        {{ author || "✖✖✖✖✖✖✖✖✖✖" }} 发布于{{ ctime || "" }}
      </div>
      <textarea
        class="content-textarea"
        :value="textareaValue"
        @input="textareaChange"
        maxlength="500"
        :placeholder="placeholder"
      ></textarea>
      <div class="content-tool">
        <el-button
          type="danger"
          class="save-btn"
          @click="confirm"
          :disabled="disabled"
          >{{ confirmText }}</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: [
    "show",
    "title",
    "content",
    "author",
    "ctime",
    "placeholder",
    "confirmText",
    "disabled",
    "textareaValue",
  ],
  data() {
    return {
      value: "",
    };
  },
  methods: {
    // 文本域
    textareaChange(e) {
      this.value = e.target.value;
    },
    // 提交
    confirm() {
      this.$emit("confirm", this.value);
    },
  },
};
</script>